import React, { useCallback, useRef, forwardRef } from 'react'

const Input = forwardRef((props, ref) => {
  return (
    <input ref={ref} type="text" />
  )
})

export default function UseImperativeHandleDemo1() {

  const input = useRef(null)

  const handleClick = useCallback(() => {
    input.current.focus()
  }, [])

  return (
    <>
      <Input ref={input}></Input>
      <button onClick={handleClick}>focus</button>
    </>
  )
}
